<template>
  <el-dialog :title=" formData.id ? '编辑部门' :'添加部门'" :visible="visible" @close="$emit('update:visible',false)">
    <el-form ref="myFormRef" :model="formData" :rules="rules" label-width="140px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="formData.name" placeholder="2-10个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="formData.code" placeholder="2-10个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="managerId">
        <el-select v-model="formData.managerId" style="width:100%" placeholder="请选择部门负责人">
          <el-option v-for="item in principalList" :key="item.id" :label="item.username" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="formData.introduce" type="textarea" placeholder="1-100个字符" />
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="$emit('update:visible',false)">取消</el-button>
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { addDepartmentAPI, getDepartmentAPI, getDepartmentDetailsAPI, getPrincipalListAPI, upDateDepAPI } from '@/api/department'
// 需求 校验表单
// 1 配置表单对象数据 表单校验规则
// 2 form绑定model rules
// 3 item绑定prop
// 4 input v-model双向绑定数据
// 5 点击按钮获取表单示例 调用validate()

// 创建阶段 发起请求 获取负责人数据 v-model绑定 v-for option
export default {
  props: {
    visible: {
      type: Boolean
    },
    pid: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      principalList: [], // 负责人列表
      formData: {
        code: '', // 部门编码
        introduce: '', // 部门介绍
        managerId: '', // 部门负责人名字
        name: '', // 部门名称
        pid: '' // 部门父级部门id
      },
      rules: {
        // 添加自定义校验 获取数据 校验部门名称 和 部门编码
        // 1 调用获取数据api
        // 2 添加自定义判断
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
          {
            // 1 添加自定义校验规则
            validator: async(rule, value, callback) => {
              // 调用api
              const result = await getDepartmentAPI()
              // 编辑部门的时候需要过滤掉自己的数据
              // filter过滤 判断添加 formData有id的时候是编辑
              if (this.formData.id) {
                result.data = result.data.filter(ele => ele.id !== this.formData.id)
              }
              // 返回的数据和value 判断 相同则校验不通过
              if (result.data.some(ele => ele.code === value)) {
                callback(new Error('部门编码已存在'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        managerId: [
          { required: true, message: '部门介绍不能为空', trigger: 'change' }
        ],
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
          {
            // 1 添加自定义校验规则
            validator: async(rule, value, callback) => {
              // 调用api
              const result = await getDepartmentAPI()
              // 返回的数据和value 判断 相同则校验不通过
              // filter过滤 判断添加 formData有id的时候是编辑
              if (this.formData.id) {
                result.data = result.data.filter(ele => ele.id !== this.formData.id)
              }
              if (result.data.some(ele => ele.name === value)) {
                callback(new Error('部门名称已存在'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    // 监听visible的变化 通过ref调用表单重置方法
    visible(newValue) {
      if (!newValue) {
        this.$refs.myFormRef.resetFields()
        // 手动把表单数据初始化
        this.formData = {
          code: '', // 部门编码
          introduce: '', // 部门介绍
          managerId: '', // 部门负责人名字
          name: '', // 部门名称
          pid: '' // 部门父级部门id
        }
      }
    }
  },
  async created() {
    // 调用获取负责人api
    const result = await getPrincipalListAPI()
    this.principalList = result.data
  },
  methods: {
    // 点击 确定按钮 校验通过后 发送新增 / 编辑请求
    async onSubmit() {
      await this.$refs.myFormRef.validate()
      // 有id发送编辑请求
      if (this.formData.id) {
        await upDateDepAPI(this.formData)
        this.$message.success('修改成功') // 提示用户
      } else {
        // 发请求需要带上id 需要父传子
        // 1 父组件定义变量 传递 子组件props接收
        // 2 封装添加api请求 调用
        await addDepartmentAPI({ ...this.formData, pid: this.pid })
        this.$message.success('新增成功') // 提示用户
      }
      this.$emit('update:visible', false) // 通知父组件关闭窗口
      this.$emit('onSuccess') // 通知父组件刷新数据
    },
    // 回填数据
    // 1 封装获取部门详细api
    // 2 提供method 调用api 把发请求回来的数据 赋值给表单对象
    // 3 父组件通过ref 获取实例 调用method 提前存入formData.id 解决闪一闪
    async onEdit(id) {
      const result = await getDepartmentDetailsAPI(id)
      this.formData = result.data
    }
  }
}
</script>

<style>

</style>
